<html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="resources/SVGAnimationTestCase.js"></script>

<h1>Reinserting SVG animation into document should continue the animation</h1>
<p id="description"></p>
<div id="console"></div>
<svg id="svg" xmlns="http://www.w3.org/2000/svg">
  <rect id="rect" x="0" y="0" width="20" height="20">
  <animate attributeName="x" begin="0" from="0" to="90" dur="3s" fill="freeze" />
  </rect>
</svg>

<script>
async_test(t => {
  svg = document.getElementById('svg');
  rect = document.getElementById('rect');

  // To ensure that a full lifecycle runs between the remove/append and the
  // later asserts, we need to do both of them in successive rAFs.
  window.requestAnimationFrame(() => {
    svg.setCurrentTime(1);

    // Removing and re-adding the SVG shouldn't change anything about the
    // underlying animation.
    document.body.removeChild(svg);
    document.body.appendChild(svg);

    // The SVG animation will continue after the next frame runs.
    window.requestAnimationFrame(t.step_func_done(() => {
      assert_greater_than_equal(svg.getCurrentTime(), 1);
      assert_greater_than_equal(rect.x.animVal.value, 30);
      svg.setCurrentTime(2);
      assert_approx_equals(rect.x.animVal.value, 60, 1);
    }));
  });
}, 'Reinserting SVG animation into document should continue the animation');
</script>
</html>
